<template>
	<view class="main-page">
		<u-navbar title="车辆管理" :autoBack="true" placeholder></u-navbar>
		<view class="form">
			<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="auto" :labelStyle="{fontSize:'26rpx',fontWeight:600}">
				<u-form-item label="品牌" prop="brand" borderBottom>
					<u--input v-model="formData.brand" border="none" placeholder="请输入品牌" inputAlign="right" fontSize="13"></u--input>
				</u-form-item>
				<u-form-item label="车型名称" prop="name" borderBottom>
					<u--input v-model="formData.name" border="none" placeholder="请输入车型名称" inputAlign="right" fontSize="13"></u--input>
				</u-form-item>
				<u-form-item label="颜色" prop="color" borderBottom>
					<u--input v-model="formData.color" border="none" placeholder="请输入颜色" inputAlign="right" fontSize="13"></u--input>
				</u-form-item>
				<u-form-item label="车牌号" prop="car_no" borderBottom>
					<u--input v-model="formData.car_no" border="none" placeholder="请输入车牌号" inputAlign="right" fontSize="13"></u--input>
				</u-form-item>
				<u-form-item label="车辆图片" prop="image" borderBottom >
					<view class="upload-item">
						<u-upload
							:fileList="car_image"
							@afterRead="(event) => {afterRead(event, 'image')}"
							@delete="(event) => {deletePic(event, 'image')}"
							name="file"
							:previewFullImage="true"
							:maxCount="1"
						></u-upload>
					</view>
				</u-form-item>
				<u-form-item label="动力类型" prop="power_type" borderBottom @click="showModal = 'power_type'">
					<u--input :value="selShows.power_type" readonly border="none" placeholder="请选择动力类型" inputAlign="right" fontSize="13"></u--input>
					<u-icon slot="right" name="arrow-right" ></u-icon>
				</u-form-item>
				<u-form-item label="油箱大小" prop="tank_size" borderBottom>
					<u--input v-model="formData.tank_size" border="none" placeholder="请输入油箱大小" inputAlign="right" fontSize="13"></u--input>
				</u-form-item>
				<u-form-item label="汽油标号" prop="petrol" borderBottom>
					<u--input v-model="formData.petrol" border="none" placeholder="请输入汽油标号" inputAlign="right" fontSize="13"></u--input>
				</u-form-item>
				<u-form-item label="车架号" prop="frame" borderBottom>
					<u--input v-model="formData.frame" border="none" placeholder="请输入车架号" inputAlign="right" fontSize="13"></u--input>
				</u-form-item>
				<u-form-item label="发动机号" prop="engine_no" borderBottom>
					<u--input v-model="formData.engine_no" border="none" placeholder="请输入发动机号" inputAlign="right" fontSize="13"></u--input>
				</u-form-item>
				<u-form-item label="座位数" prop="staets" borderBottom>
					<u--input v-model="formData.staets" border="none" placeholder="请输入座位数" inputAlign="right" fontSize="13"></u--input>
				</u-form-item>
				<u-form-item label="挡位类型" prop="car_type" borderBottom @click="showModal = 'car_type'">
					<u--input :value="selShows.car_type" readonly border="none" placeholder="请选择挡位类型" inputAlign="right" fontSize="13"></u--input>
					<u-icon slot="right" name="arrow-right" ></u-icon>
				</u-form-item>
				<u-form-item label="驾照要求" prop="car_license" borderBottom>
					<u-checkbox-group v-model="formData.car_license" placement="row">
						<u-checkbox :customStyle="{marginBottom: '8px'}" :checked="formData.car_license.length > 0 && formData.car_license.indexOf(item.id) > -1" v-for="(item, index) in selActions.car_license" :key="index" :label="item.name" :name="item.id" > </u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			</u--form>
			<view class="btn-item">
				<u-button class="bg-linear-main" type="primary" shape="circle" text="确定" @tap="submit"></u-button>
			</view>
		</view>
		<u-action-sheet :show="showModal == 'power_type'" :actions="selActions.power_type" title="请选择动力类型" @close="showModal = ''" @select="(event) => { sheetSelect(event, 'power_type') }" > </u-action-sheet>
		<u-action-sheet :show="showModal == 'car_type'" :actions="selActions.car_type" title="请选择挡位类型" @close="showModal = ''" @select="(event) => { sheetSelect(event, 'car_type') }" > </u-action-sheet>
	</view>
</template>

<script>
	import { fileUrl } from '../../common/config';
import { carAdd, carEdit } from '@/common/api.js'
	import upload from '@/common/upload.js'
	
	export default {
		data() {
			return {
				showModal: "",
				selShows: {
					power_type: '',
					car_type: '',
					car_license: '',
				},
				selActions: {
					power_type: [
						{id:'1', name: '汽油'},
						{id:'2', name: '柴油'},
						{id:'3', name: '纯电'},
						{id:'4', name: '插混'},
						{id:'5', name: '增程'}
					],
					car_type:[
						{name: '手动挡', id: "1"},
						{name: '自动档', id: "2"}
					],
					car_license: [
						{id:'1', name: 'C1'},
						{id:'2', name: 'C2'},
						{id:'3', name: 'A1'},
						{id:'4', name: 'A2'},
						{id:'5', name: 'B1'},
						{id:'6', name: 'B2'}
					]
				},
				formData: {
					"id": "",
					"brand": "",
					"name": "",
					"color": "",
					"car_no": "",
					"image": "",
					"images": "",
					"power_type": "",
					"tank_size": "",
					"petrol": "",
					"frame": "",
					"engine_no": "",
					"staets": "",
					"car_type": "",
					"car_license": "",
				},
				rules: {
					'brand': {type: 'string',required: true,message: '请填写品牌',trigger: ['blur', 'change']},
					"name": {type: 'string',required: true,message: '请填写车型名称',trigger: ['blur', 'change']},
					"color": {type: 'string',required: true,message: '请填写颜色',trigger: ['blur', 'change']},
					"car_no": {type: 'string',required: true,message: '请填写车牌号',trigger: ['blur', 'change']},
					"image": {type: 'string',required: true,message: '请上传车辆图片',trigger: ['blur', 'change']},
					"power_type": {type: 'string',required: true,message: '请选择动力类型',trigger: ['blur', 'change']},
					"tank_size": {type: 'string',required: true,message: '请填写油箱大小',trigger: ['blur', 'change']},
					"petrol": {type: 'string',required: true,message: '请填写汽油标号',trigger: ['blur', 'change']},
					"frame": {type: 'string',required: true,message: '请填写车架号',trigger: ['blur', 'change']},
					"engine_no": {type: 'string',required: true,message: '请填写发动机号',trigger: ['blur', 'change']},
					"staets": {type: 'string',required: true,message: '请填写座位数',trigger: ['blur', 'change']},
					"car_type": {type: 'string',required: true,message: '请选择挡位类型',trigger: ['blur', 'change']},
					"car_license": {type: 'array',required: true,message: '请选择驾照要求',trigger: ['blur', 'change']},
				},
				car_image: []
			}
		},
		onLoad(options) {
			this.formData.id = options.id;
			if(this.formData.id){
				const detail = uni.getStorageSync('$tempData');
				this.formData = {...detail};
				this.car_image = [{ url: this.formData.image,status: 'success' }];
				this.selShows.power_type = this.formData.power_type;
				this.selShows.car_type = this.formData.car_type;
				this.formData.power_type = this.selActions.power_type.find(p => p.name == this.formData.power_type)['id'];
				this.formData.car_type = this.selActions.car_type.find(p => p.name == this.formData.car_type)['id'];
				this.formData.car_license = this.formData.car_license.map(item => {
					return item = this.selActions.car_license.find(p => p.name == item)['id'];
				})
				console.log('this.formData.car_license', this.formData.car_license)
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			async afterRead(event, field) {
				const file = event.file
				this.car_image.splice(0, 1, {
					...file,
					status: 'uploading',
					message: '上传中'
				})
				console.log(event);
				const result = await upload({filePath: file.url})
				switch(field){
					case 'image':
						this.formData.image = result.file.url
						this.car_image.splice(0, 1, {...file,status: 'success', message: '', url: result.file.url})
					break;
				}
			},
			deletePic(event, field){
				switch(field){
					case 'image':
						this.formData.image = ""
						this.car_image.splice(event.index, 1)
					break;
				}
			},
			sheetSelect(event, field){
				this.selShows[field] = event.name;
				this.formData[field] = event.id;
			},
			submit(){
				this.$refs.uForm.validate().then(res => {
					const method = !this.formData.id ? carAdd : carEdit;
					uni.showLoading();
					const params = {...this.formData};
					params.image = params.image.replace(fileUrl, '');
					// params.car_license = typeof(params.car_license) == "string" ? params.car_license : params.car_license.join(',')
					method(params).then(res => {
						uni.$u.toast('操作成功!');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500)
						uni.hideLoading();
					}).catch(res => {
						uni.$u.toast('操作失败!');
						uni.hideLoading();
					})
				}).catch(errors => {
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.search-container { 
		padding: 25rpx 15rpx; display: flex; justify-content: space-between;
		&-right {
			padding-left: 15rpx;
		}
	}
	.form { 
		background-color: #fff; padding: 30rpx; 
		
	}
</style>
